<template>
  <div class="column column4" ref="column" :style="{height:centerHeight + 'px'}">
    <div class="panel"  :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}">
      <div class="title">
        <h2><span>产经新闻</span></h2>
      </div>
      <!--      轮播图-->
      <swiperBox ref="swiperBox" :panelWight="panelWight" :wrapperHeight="wrapperHeight" :bannerList="bannerList" v-if="bannerList.length > 0"></swiperBox>
      <div class="no-data" v-else>
        <img src="../../assets/images/no-data.png" alt="">
        <p>暂无数据</p>
      </div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel" :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}">
      <div class="title">
        <h2><span>营商环境</span></h2>
        <div class="more">
          <router-link target="_blank" to="/news?newsType=3">更多</router-link>
        </div>
      </div>
      <div class="wrap">
        <ul v-if="newsList.length > 0">
          <li v-for="(item) in newsList">
            <router-link target="_blank" :to="{path:'/news/details',query:{newsId:item.newsId}}">
              <p>{{ item.newsTitle }}</p>
            </router-link>
          </li>
        </ul>
        <div class="no-data" v-else>
          <img src="../../assets/images/no-data.png" alt="">
          <p>暂无数据</p>
        </div>
      </div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel" :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}">
      <div class="title">
        <h2><span>发展规划</span></h2>
        <div class="more">
          <router-link target="_blank" to="/news?newsType=4">更多</router-link>
        </div>
      </div>
      <div class="wrap2 wrap" ref="wrap">
        <ul v-if="newsList2.length > 0">
          <li v-for="(item) in newsList2">
            <router-link target="_blank" :to="{path:'/news/details',query:{newsId:item.newsId}}">
              <p>{{ item.newsTitle }}</p>
            </router-link>
          </li>
        </ul>
        <div class="no-data" v-else>
          <img src="../../assets/images/no-data.png" alt="">
          <p>暂无数据</p>
        </div>
      </div>
      <div class="panel-footer"></div>
    </div>
  </div>
</template>
<script>

import { listBanner, listBannerQuery } from '../../api/system/banner'
import Swiper from 'swiper'
import swiperBox from './swiper'
import { listNewsQuery } from '../../api/system/news'
export default {
  name: 'right_part1',
  props: {
    centerHeight: {
      type: Number,
      default: 0
    }
  },
  components: {
    swiperBox
  },
  data() {
    return {
      panel_img: require('../../assets/images/line(1).png'),
      //块高度
      panelHeight: 0,
      newsList: [],
      newsList2: [],
      bannerList:[],
      queryParams: {
        bannerType:2
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      //块宽度
      panelWight: 0,
      //轮播图高度
      wrapperHeight: 0,

    }
  },
  created() {
    this.panelHeight = this.centerHeight / 3
    this.getBannerList()
    this.getNewsList()
  },
  mounted() {
    this.panelWight = this.$refs.column.offsetWidth
    this.wrapperHeight = this.$refs.wrap.offsetHeight
  },
  methods:{
    async getBannerList() {
      this.queryParams.cityCode = this.$route.query.cityCode
      const response = await listBanner(this.queryParams)
      this.bannerList = response.rows
      //图片拉取完成后执行
      setTimeout(() => {
        this.$refs.swiperBox.initSwiper()
      }, 100)
    },
    getNewsList() {
      const queryParams = {cityCode:this.$route.query.cityCode}
      this.newsList = []
      this.newsList2 = []
      this.newsList3 = []
      listNewsQuery(queryParams).then(response => {
        response.rows.forEach(item => {
          if (item.newsType == 3) {
            this.newsList.push(item)
          } else if (item.newsType == 4) {
            this.newsList2.push(item)
          }
        })
      })
    },

  },
  watch:{
    $route:{
      handler(val,oldval){
        console.log(val,"出发了");//新路由信息
        console.log(oldval);//老路由信息
        this.getNewsList()
        this.getBannerList()
      },
      // 深度观察监听
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
@import './css/right_part';
</style>
<style lang="scss">
.swiper-button-next:after{
  font-size: 20px;
}.swiper-button-prev:after{
  font-size: 20px;
}
.swiper-container{
  width: 300px;
  img{
    width: 100%;
    height: 100%;
  }
}
</style>
